<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>one Demo</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			html,body{
				height: 100%;
				width: 100%;
			}
			canvas{
				display: block;
			}
		</style>
		<script>
		
			var canvas ;
			var context;
				
			$(document).ready(function(){
				canvas = $("#myCanvas");
				context = canvas.get(0).getContext("2d");
				
				//$(window).resize(resizeCanvas);
				//huitu();
				//juzhen();
				//testGlobalAlpha();
				//testHeCheng();
				//shadowTest();
				//gradientLineTest()
				//gradientRTest();
				//fuzaPath();
				//saveImg();
				//loadImg();
				//wanhuatong();
				//utilColorRead();
				//pixelTest();
				//mosaicTest();
				//canvas.mousemove(mosaicTest);
				//setInterval(mosaicTest, 1000);
				
				//inversionPixel();
				//huidu();
				pokerFace();
			});
			
			function pokerFace(){
				var image = new Image();
				image.src = "img/d.jpg";
				$(image).load(function() {
					context.drawImage(image, 0, 0, 500, 333);
					
					var imageData = context.getImageData(0, 0, 500, 333);
					var pixels = imageData.data;
					
					context.clearRect(0, 0, 500, 333);
					
					var numTileRows = 40;
					var numTileCols = 40;
					
					var tileWidth = imageData.width / numTileCols;
					var tileHeight = imageData.height / numTileRows;
					
					for(var r = 0; r < numTileRows; r++){
						for(var c=0; c < numTileCols; c++){
							var x = (c*tileWidth) + (tileWidth/2);
							var y = (r*tileHeight) + (tileHeight/2);
							
							var pos = ((Math.floor(y) * (imageData.width*4)) + (Math.floor(x)*4));
							
							var red = pixels[pos];
							var green = pixels[pos+1];
							var blue = pixels[pos+2];
							
							context.fillStyle = "rgb("+red+","+green+","+ blue+")";
							//context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight);
							context.beginPath();
							context.arc(x,y, tileWidth/3, 0, Math.PI*2,false);
							context.closePath();
							context.fill();
						}
					}
				});
			}
			
			function huidu(){
				var image = new Image();
				image.src = "img/y.jpg";
				$(image).load(function() {
					context.drawImage(image, 0, 0, 500, 333);
					var imageData = context.getImageData(0, 0, 500, 333);
					var pixels = imageData.data;
					var numPixels = pixels.length;
					
					//context.clearRect(0, 0, canvas.width(), canvas.height());
					
					for(var i=0; i<numPixels; i++){
						var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2])/3;
						//var average = 255*(i*4/numPixels);
						pixels[i*4] = average;
						pixels[i*4+1] = average;
						pixels[i*4+2] = average;
						pixels[i*4+3] = 255;
					}
					context.putImageData(imageData, 0, 400);
				});
			}
			
			function inversionPixel(){
				var image = new Image();
				image.src = "img/y.jpg";
				$(image).load(function() {
					context.drawImage(image, 0, 0, 500, 333);
					var imageData = context.getImageData(0, 0, 500, 333);
					var pixels = imageData.data;
					var numPixels = pixels.length;
					
					//context.clearRect(0, 0, canvas.width(), canvas.height());
					
					for(var i=0; i<numPixels; i++){
						pixels[i*4] = 255-pixels[i*4];
						pixels[i*4+1] = 255-pixels[i*4+1];
						pixels[i*4+2] = 255-pixels[i*4+2];
						pixels[i*4+3] = 255;
					}
					context.putImageData(imageData, 0, 400);
				});
				
			}
			
			function mosaicTest(){
				var imageData = context.createImageData(500, 500);
				var pixels = imageData.data;
				
				var numTitleRows = 10;
				var numTitleCols = 10;
				
				var tileWidth = imageData.width/numTitleCols;
				var tileHeight = imageData.height/numTitleRows;
				
				for(var r=0; r<numTitleRows; r++){
					for(var c=0; c<numTitleCols; c++){
						var red = Math.floor(Math.random()*255);
						var green = Math.floor(Math.random()*255);
						var blue = Math.floor(Math.random()*255);
						
						for(var tr=0; tr<tileHeight; tr++){
							for(var tc=0; tc<tileWidth; tc++){
								var trueX = (c* tileWidth)+tc;
								var trueY = (r*tileHeight)+tr;
								
								var pos = (trueY*(imageData.width*4)) + (trueX*4);
								
								pixels[pos] = red;
								pixels[pos+1] = green;
								pixels[pos+2] = blue ;
								pixels[pos+3] = 255;
							}
						}
					}
				}
				
				context.putImageData(imageData, 0, 0);
			}
			
			function pixelTest(){
				var imageData = context.createImageData(200, 200);
				var pixels = imageData.data;
				
				var numPixels = imageData.width * imageData.height;
				
				for(var i = 0; i<numPixels; i++){
					pixels[i * 4] = Math.floor(Math.random()*255);
					pixels[i*4 +1] = Math.floor(Math.random()*255);
					pixels[i*4 +2] = Math.floor(Math.random()*255);
					pixels[i*4 +3] = 255;//透明度
				}
				
				context.putImageData(imageData, 50, 50);
			}
			
			function utilColorRead(){
				var image = new Image();
				image.src = "img/y.jpg";
				$(image).load(function() {
					var imgHeight = canvas.width() * image.height/image.width; 
					context.drawImage(image, 0, 0, canvas.width(), imgHeight);
				});
				
				//canvas.click(colorRead);
				canvas.mousemove(colorRead)
			}
			
			function colorRead(e){
				var canvasOffset = canvas.offset();
				var canvasX = Math.floor(e.pageX - canvasOffset.left);
				var canvasY = Math.floor(e.pageY - canvasOffset.top);
				
				var imageData = context.getImageData(canvasX, canvasY, 1, 1);
				var pixel = imageData.data;
				var pixelColor = "rgba("+ pixel[0] +"," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")";
				
				$("body").css("backgroundColor",pixelColor);
			}
			
			
			function wanhuatong(){
				var image = new Image();
				image.src = "img/x.jpg";
				$(image).load(function() {
					//左上角
					context.translate(50, 50);
					context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200);
					
					//左下角
					context.setTransform(1, 0, 0, 1, 0, 0);//重置变换矩阵
					context.translate(50, 450);
					context.scale(1, -1);//负数缩放因子，会使图像翻转！同时坐标也会反转！
					
					context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200);
					
					//右上角
					context.setTransform(1, 0, 0, 1, 0, 0);
					context.translate(450, 50);
					context.scale(-1, 1);
					
					context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200);
					
					//右下角
					context.setTransform(1, 0, 0, 1, 0, 0);
					context.translate(450, 450);
					context.scale(-1, -1);
					
					context.drawImage(image, 0, 0, 500, 500, 0, 0, 200, 200);
				})
			}
			
			function loadImg(){
				context.shadowBlur = 20;
				context.shadowColor = "rgb(0,0,0)";
				
				var image = new Image();
				image.src = "img/cheng.jpg";
				//确保图像已经完全加载
				$(image).load(function() {
					//context.drawImage(image, 0, 0);//受画布大小限制
					
					//图像缩放
					//var imgHeight = canvas.width() * image.height/image.width; 
					//context.drawImage(image, 0, 0, canvas.width(), imgHeight);
					
					//图像剪裁
					context.drawImage(image, 50, 50, 250, 250, 100, 100, 300, 300);
				})
			}
			
			//PS:base64数据比它表示的原始二进制图像数据大50%。如果图像过大，则需要考虑一些问题了。
			function saveImg(){
				context.save();
				
				context.fillRect(50, 50, 100, 100);
				
				context.fillStyle = "rgb(255, 0, 0)";
				context.fillRect(100, 100, 100, 100);
				
				context.restore();
				context.fillRect(150, 150, 100, 100);
				
				var dataUrl = canvas.get(0).toDataURL();
				
				//window.location = dataUrl;
				
				var img = $("<img></img>");
				img.attr("src", dataUrl);
				
				canvas.replaceWith(img);
			}
			
			//PS: Adobe Illustrator 有一个 Ai->Canvas 的插件 允许将绘制好的矢量图形转换成画布代码。
			function fuzaPath(){
				context.beginPath();
				context.moveTo(100, 50);
				context.lineTo(150, 150);
				context.lineTo(50, 150);
				context.closePath();
				context.stroke();
				context.fill();
				
				context.lineWidth = 5;
				context.beginPath();
				context.moveTo(200, 100);
				context.quadraticCurveTo(300, 20, 400, 100);//控制点(x,y) 目标点(x,y)
				context.stroke();
				
				context.beginPath();
				context.moveTo(50, 300);
				//控制点1(x,y) 控制点2(x,y) 目标点(x,y)
				context.bezierCurveTo(150, 200, 250, 400, 350, 300);
				context.stroke();
			}
			
			function gradientRTest(){
				var gradient = context.createRadialGradient(300, 300, 20, 100, 100, 50);
				gradient.addColorStop(0, "rgb(0, 0, 0)");
				gradient.addColorStop(1, "rgb(150, 150, 150)");
				
				context.fillStyle = gradient;
				context.fillRect(0, 0, canvas.width(), canvas.height());
				
				context.fillStyle = "rgb(255, 0, 0)";
				//context.fillRect(300, 300, 50, 50);
				context.beginPath();
				context.arc(300, 300, 20, 0, Math.PI*2, false);
				context.closePath();
				context.fill();
				
				context.beginPath();
				context.arc(100, 100, 50, 0, Math.PI*2, false);
				context.closePath();
				context.fill();
				
				//画一个太阳
				//渐变
				var gradient2 = context.createRadialGradient(600, 300, 10, 600, 300, 150);
				gradient2.addColorStop(0.2, "rgb(255, 255, 255)");
				gradient2.addColorStop(0.5, "rgb(253,250,187)");
				gradient2.addColorStop(0.8, "rgb(253,246,127)");
				gradient2.addColorStop(1, "rgb(253,213,122)");
				
				//阴影
				context.shadowBlur = 100;
				context.shadowColor = "rgb(253,199,97)";
				
				context.fillStyle = gradient2;
				context.beginPath();
				context.arc(600, 300, 150, 0, Math.PI*2, false);
				context.closePath();
				context.fill();
			}
			
			function gradientLineTest(){
													//渐变起点(x,y) 渐变终点(x,y)
				var gradient = context.createLinearGradient(0, 0, 200, 200);
				gradient.addColorStop(0, "rgb(255, 0, 0)");
				gradient.addColorStop(0.5, "rgb(155, 255, 0)");
				gradient.addColorStop(1, "rgb(255, 0, 255)");
				
				context.fillStyle = gradient;
				context.fillRect(0, 0, 200, 200);
			}
			
			//阴影
			function shadowTest(){
				context.shadowBlur = 20;
				context.shadowColor = "rgb(0,0,0)";
				context.fillRect(50, 50, 100, 100);
				
				context.shadowBlur = 0;
				context.shadowOffsetX = 10;
				context.shadowOffsetY = 10;
				context.shadowColor = "rgba(100, 100, 100, 0.5)";//透明灰色
				context.fillRect(200, 50, 100, 100);
				
				context.shadowColor = "rgb(255, 0, 0)";
				context.shadowBlur = 50;
				context.shadowOffsetX = 0;
				context.shadowOffsetY = 0;
				context.beginPath();
				context.arc(400, 100, 50, 0, Math.PI*2, false);
				context.closePath();
				context.fill();
				
				context.fillStyle = "rgb(255, 251, 215)";
				context.shadowColor = "rgb(255, 230, 0)";
				context.shadowBlur = 50;
				context.beginPath();
				context.arc(550, 100, 50, 0, Math.PI*2, false);
				context.closePath();
				context.fill();
			}
			
			function testHeCheng(){
				context.fillStyle = "rgb(63, 169, 245)";//蓝色(目标)
				context.fillRect(50, 50, 100, 100);
				//context.globalCompositeOperation = "source-over";	//源覆盖于原目标之上
				//context.globalCompositeOperation = "destination-over";//目标覆盖源
				//context.globalCompositeOperation = "source-atop";	//目标 left join 源
				//context.globalCompositeOperation = "source-in";	//交集
				//context.globalCompositeOperation = "source-out";	//差集
				context.globalCompositeOperation = "lighter";	//交集的颜色为 255白色。不想相交部分保留。
				context.globalCompositeOperation = "copy";//覆盖目标，只绘制源。
				context.globalCompositeOperation = "xor";//异或，只绘制不是交集的部分
				
				context.fillStyle = "rgb(255, 123, 172)";
				context.fillRect(100, 100, 100, 100);//粉色(源)
			}
			
			function testGlobalAlpha(){
				context.fillStyle = "rgb(63, 169, 245)";
				context.fillRect(50, 50, 100, 100);
				context.globalAlpha = 0.5;
				context.fillStyle = "rgb(255, 123, 172)";
				context.fillRect(100, 100, 100, 100);
			}
			
			function juzhen(){
				context.setTransform(1, 0, 0, 1, 0, 0);//单位矩阵
				var xScale = Math.cos(0.7854);	//缩放
				var ySkew = -Math.sin(0.7854);	//倾斜
				var xSkew = Math.sin(0.7854);
				var yScale = Math.cos(0.7854);
				var xTrans = 200;
				var yTrans = 200;
				
				context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);
				context.fillRect(-50, -50, 100, 100);
			}
			
			function huitu(){
				context.fillRect(150, 150, 100, 100);
				
				context.translate(300, 300);
				context.scale(2, 2);
				context.rotate(0.7854);
				
				context.fillRect(0, 0, 120, 120);
				
				context.translate(200,-150);
				context.scale(0.25, 0.25);
				context.rotate(-0.3);
				
				context.fillRect(0, 0, 120, 120);
			}
			
			//重新设置一个canvas 元素的宽高时，Canvas会重置。
			function resizeCanvas(){
				canvas.attr("width", $(window).get(0).innerWidth);
				canvas.attr("height", $(window).get(0).innerHeight);
				//context.fillRect(0, 0, canvas.width(), canvas.height());
			}
		</script>
	</head>
	<body>
		<canvas id="myCanvas" width="1200" height="1000">
		</canvas>
	</body>
</html>
